<template>
  <div>
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div >
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="usrId" label="编号">
        </el-table-column>
        <el-table-column prop="usrName" label="用户名">
        </el-table-column>
        <el-table-column prop="usrRoleId" label="角色">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>


      <el-pagination background @current-change="changeIndex" :page-size="pageSize" layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {},
      total: 0,
      pageSize: 2,
      pageIndex:1,
      tableData: []
    }
  },
  mounted() {
    this.loadPageList(1)
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    
    onSubmit() {
       
     },
    loadPageList(pageIndex) {
      this.$axios.post("/api/user/list" ,{pageIndex:pageIndex,pageSize:this.pageSize}).then(resp => {
        console.log(resp)
        this.tableData = resp.data.records
        this.total = resp.data.total
      });
    },
    changeIndex(res){
      this.loadPageList(res)
    }
  },
}
</script>

<style>
.search {
  background-color: white;
  margin-bottom: 10px;
  padding-top: 22px;
  text-align: left;
  padding-left: 40px;
  /* height: 80px;  
  line-height: 80px; */
}


.el-pagination {
  text-align: right;
  background-color: white;
  padding: 40px;
}


</style>